<template>
  <div class="login-form">
    <el-form
      ref="loginForm"
      :model="loginForm"
      auto-complete="on"
      label-position="left"
      label-width="30px;"
      hide-required-asterisk
    >
      <div class="title-container">
        <img :src="systemInfo.logo" height="68px" />
        <span class="title">{{ systemInfo.name }}</span>
      </div>
      <el-form-item prop="account" verify>
        <span class="svg-container" slot="label">
          <i class="el-icon-user"></i>
        </span>
        <el-input
          ref="account"
          v-model.trim="loginForm.account"
          placeholder="账号"
          name="account"
          type="text"
          :auto-complete="autocomplete"
        />
      </el-form-item>

      <el-form-item prop="password" verify>
        <span class="svg-container" slot="label">
          <i class="el-icon-lock"></i>
        </span>
        <el-input
          class="password-input"
          ref="password"
          v-model.trim="loginForm.password"
          :type="passwordType"
          placeholder="密码"
          name="password"
          :auto-complete="autocomplete"
          @keyup.enter.native="$refs.tencentCaptchaBtn.handleLogin()"
        />
        <span
          class="show-pwd"
          @click="showPwd"
          :class="[
            passwordType === 'password'
              ? 'el-icon-yjwl-huabanfuben'
              : 'el-icon-yjwl-chakanmima1 eye-open'
          ]"
        ></span>
      </el-form-item>
      <div class="switch-login">
        <span @click="$emit('switch')" title="使用手机号登录">手机号登录</span>
      </div>

      <tencent-captcha
        ref="tencentCaptchaBtn"
        :loading="loading"
        @adopt="handleLogin"
        :formRef="$refs.loginForm"
      >
        登录
      </tencent-captcha>
    </el-form>
  </div>
</template>
<script>
import tencentCaptcha from './tencent-captcha.vue'
import store from '@/store'
import { mapGetters } from 'vuex'

export default {
  name: 'account-login',
  props: ['silent'],
  inject: ['loginSuccess'],
  components: { tencentCaptcha },
  data () {
    return {
      loginForm: {
        account: '',
        password: ''
      },
      passwordType: 'password',
      loading: false,
      redirect: undefined,
      otherQuery: {},
      autocomplete:
        import.meta.env.MODE === 'development' ? 'on' : 'new-password'
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  computed: {
    ...mapGetters(['systemInfo'])
  },
  mounted () {
    if (this.loginForm.account === '') {
      this.$refs.account.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },
  methods: {
    showPwd () {
      this.passwordType = this.passwordType === 'password' ? '' : 'password'
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin (res) {
      if (res) {
        this.loginForm.ticket = res.ticket
        this.loginForm.randStr = res.randstr
      }
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          store
            .dispatch('user/login', this.loginForm)
            .then(res => {
              if (res.data) {
                if (res.errorCode == '00000') {
                  if (this.silent != undefined) {
                    this.loginSuccess() // 触发父组件登录成功
                    this.$swal.success('登录成功')
                  } else {
                    this.$router.push({
                      path: this.redirect || '/',
                      query: this.otherQuery
                    })
                  }
                  return
                }

                if (res.errorCode == '00132') {
                  this.$swal.error(res.message)
                  // this.$refs.changPwd.handleChangePwd(res.data.token)
                }
              } else {
                this.$swal.error('获取用户信息失败')
              }
              // $refs.changPwd.changePwd()
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    getOtherQuery (query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>
